@import "../font/iconfont.css"; 
:root {
    --black:#1a1a1a;
    --red: #df0023;
    --orange: #ffa400;
    --blue: #00622f;
    --green: #90c320;
  }

.color-888{ color: #888;}
.font-weight{ font-weight: bold;}
.bg-red{background-color: var(--red);}
.color-red{color: var(--red);}


/* .font334{ font-size: 334px; line-height: 1;} */
.font334{font-size: clamp(3.125rem, -0.425rem + 17.75vw, 18rem); line-height: 1;}

.flh{ line-height: 1.5; }
/* fonts */
.ml-50{ margin-left: 20px;}
.flex-shrink{ flex-shrink: 0;}
.text-nowrap{ white-space: nowrap;}
.z5{ position: relative; z-index: 5;}
.transition{ transition: all .36s;}
.line-height{ line-height: 2;}
.idxPro{ background: #f9fcfe;}
.idxProlist{ display: flex; flex-wrap: wrap;}
.idxProlist li{ width: calc((100% - 120px)/4); margin-right: 40px; margin-bottom: 40px; padding: 15px 20px; box-shadow: 5px 0 24px rgba(0, 0, 0, .1); transition: all .36s;
	 background: url(../images/xyfn.png) no-repeat bottom right #FFF ; position: relative;}
.idxProlist li:nth-child(4n){ margin-right: 0;}
.idxProlist li .round{ width: 80px; height: 80px; border: 1px dashed #e11232; }
.idxProlist li .round::after{ transition: all .36s; width:80%; height: 80%;top: calc(10% - 1px); left: calc(10% - 1px); border: 1px dashed #e11232; position: absolute; display: block; content: '' ; border-radius:50% ; }
.idxProlist li .round::before{ transition: all .36s; width:80%; height: 80%;top: calc(10% - 1px); left: calc(10% - 1px); background: rgba(255, 255, 255, .28); transform: scale(0); position: absolute; display: block; content: '' ; border-radius:50% ; }
.idxProlist li .round .idxProIcon{ height: 36%;}
.idxProlist li .desc{ line-height: 2; font-size: 14px;  padding-bottom: 45px;  margin: 15px; margin-bottom: 0;}

.idxProlist li .more{ margin-left: 15px;position: absolute;   bottom: 15px;}
.idxProlist li .more .iconfont{ margin-left: 12px;}
/* transform: scale(0.95); */
.idxProlist li:hover{background: url(../images/xyfn-white.png) no-repeat bottom right var(--red); color: #fff; }
.idxProlist li:hover .engTit,.idxProlist li:hover .more{  color: #fff;}
.idxProlist li:hover .more .iconfont{ font-size: 24px;  color: #fff;}
.idxProlist li:hover .round{  border: 1px dashed rgba(255, 255, 255, .28); }
.idxProlist li:hover .round::after{ border: 1px solid transparent;}
.idxProlist li:hover .round::before{ transform: scale(1);}
.idxProlist li:hover .round .idxProIcon{filter: grayscale(100%) brightness(500%); }
.ysCon{ background: url(../images/ysBg.jpg) no-repeat center center; background-size: cover; background-attachment: fixed; position: relative;}

.text-miao{ text-stroke:1px #fff; -webkit-text-stroke: 1px #fff;color: transparent;}
	.text-center{ text-align: center;}
	.color-white{ color: white;}
	.ysCon{ position: relative;}
	.ysCon::after{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, .2); display: block; content: '';}
	.ysCon li{perspective: 200px; overflow: hidden; position: relative; padding-top: 18vh; padding-bottom: 15vh; width: calc(100% / 3); padding-left: 4vw; padding-right:  4vw;}
	.ysCon li .tit{ margin-top: 70px; margin-bottom: 50px;}
	.ysCon li::before{ width: 100%; height: 100%; z-index: 1; transition: all .36s; display: block; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0,.4); display: block; content: ''; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; }
	.ysCon li::before {transform:rotateY(0) ;  -webkit-transform:rotateY(0) ; -moz-transform:rotateY(0) ; -ms-transform:rotateY(0) ; -o-transform:rotateY(0) ; }
	.ysCon li:hover::before,.ysCon li.on::before{ transform:rotateY(45deg) ;opacity: 0; -webkit-transform:rotateY(45deg) ; -moz-transform:rotateY(45deg) ; -ms-transform:rotateY(45deg) ; -o-transform:rotateY(45deg) ;  }
	.ysCon:hover > li:not(:hover)::before{ transform:rotateY(0) ; opacity: 1; -webkit-transform:rotateY(0) ; -moz-transform:rotateY(0) ; -ms-transform:rotateY(0) ; -o-transform:rotateY(0) ;}
	.ysCon li.on .font334,.ysCon li:hover .font334{ color: #fff;}
	.ysCon:hover > li:not(:hover)  .font334{color: transparent;}

    .block{ display: block;}
	.idxApp{ background: #f1f8fb;}
	.posi{ position: relative;}
	.bg-white{ background: #fff;}
	.idxAppSwiper a{ padding: 20px;}
	.idxApp .next,.idxApp .prev{ cursor: pointer; width: 60px; height: 60px; border-radius: 50%; background: var(--red); color: #fff; position: absolute; top: 50% ;margin-top: -30px; z-index: 10;}
	.idxApp .prev{ left: -90px;}
	.idxApp .next{ right: -90px;}

    @media screen and (max-width:1440px) {
        .idxApp .next,.idxApp .prev{   width: 50px; height: 50px; }
        .idxApp .prev{ left: -60px;}
        .idxApp .next{ right: -60px;}
 
     
    }

    @media screen and (max-width:1300px) {
        .idxApp .next,.idxApp .prev{   width: 50px; height: 50px; }
        .idxApp .prev{ left: 0;}
        .idxApp .next{ right: 0;}
 
     
    }